<template>
  <div class="app-container">
    <!--头部-->
    <table-search @onSearch="getSystemLogs" @onReset="handleReset">
      <template slot="search">
        <date-group @success="handleDate" />
      </template>
    </table-search>
    <!--内容-->
    <table-page
      :data="list"
      :loading="loadingTableVisible"
      :where="listQuery"
      :total="total"
      @pagination="getSystemLogs"
    >
      <template slot="column">
        <el-table-column label="编号" prop="id" align="center" width="80" />
        <el-table-column label="操作人" prop="adminId" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{$global.admins[row.adminId]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="来源" prop="source" align="center" width="120">
          <template slot-scope="{row}">
            <span>{{$global.enums['saaS.Model.Enums.SystemLoggerSource'][row.source]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统类型" prop="type" align="center" width="80" />
        <el-table-column label="信息" prop="message" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <a
              class="list-a"
              href="javascript:void(0)"
              @click="handleLogInfo(row)"
            >{{ row.message }}</a>
          </template>
        </el-table-column>
        <el-table-column label="登陆IP地址" prop="ip" align="center" width="150">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.ipAddress"
              placement="right-start"
            >
              <span>{{ scope.row.ip }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" prop="creationTime" align="center" width="150">
          <template slot-scope="scope">
            <div v-html="$htmlFunction.parseTime(scope.row.creationTime)" />
          </template>
        </el-table-column>
      </template>
    </table-page>
    <!--详情-->
    <el-dialog :visible.sync="dialogLogVisible" title="日志详情">
      <json-viewer :value="temp" />
    </el-dialog>
  </div>
</template>

<script>
import TablePage from "@/components/TablePage"; // table 分页
import DateGroup from "@/components/DateGroup"; // date 时间组
import TableSearch from "@/components/TableSearch";
import JsonViewer from "vue-json-viewer"; // json格式化展示
export default {
  name: "Admin-Log",
  components: { TableSearch, TablePage, JsonViewer, DateGroup },
  data() {
    const listDefault = {
      page: 1,
      limit: 20,
      adminId: undefined,
      startTime: undefined,
      endTime: undefined
    };
    return {
      listQuery: listDefault,
      list: [],
      total: 0,
      loadingTableVisible: true,
      dialogLogVisible: false,
      temp: []
    };
  },
  created() {
    this.getSystemLogs();
  },
  methods: {
    //加载分页数据
    getSystemLogs() {
      this.loadingTableVisible = true;
      this.$form("/system/admin/logs", this.listQuery)
        .then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.loadingTableVisible = false;
        })
        .catch(() => {
          this.loadingTableVisible = false;
        });
    },
    //重置搜索按钮数据
    handleReset() {
      this.listQuery = this.listDefault;
    },
    // 明细事件
    handleLogInfo(row) {
      const loading = this.$loading({ text: "正在加载数据..." });
      this.$get("/system/admin/log/" + row.id)
        .then(response => {
          loading.close();
          this.dialogLogVisible = true;
          this.temp = response.data;
          this.temp.requestInfo = JSON.parse(response.data.requestInfo);
        })
        .catch(err => {
          loading.close();
          console.error(err);
        });
    },
    //时间选择回调
    handleDate(startTime, endTime) {
      this.listQuery.startTime = startTime;
      this.listQuery.endTime = endTime;
    }
  }
};
</script>

